<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>请输入要猜的数字, 限定在 1-100 之间: </p>
        <input type="text" name="" id="">
        <button>
            提交
        </button>
    </div>
    <p></p>
    <div class="result">
        <!-- 用于显示结果 -->
    </div>


    <script>
        // 生成一个 1- 100 的随机数
        // Math.random 生成一个[0,1)之间的小数
        // 转为整数
        let guess = parseInt(100 * Math.random() + 1);
        console.log(guess);

        // 猜数字
        // 获取点击提交按钮
        let button = document.querySelector('button');
        // 获取输入框内容
        let input = document.querySelector('input');
        // 获取返回结果
        let result = document.querySelector('.result');
        button.onclick = function() {
            // 用户什么都没输入
            if(input.value == '') {
                return ;
            }

            // 将用户输入的数字转为整数
            let inputNum = parseInt(input.value);

            // 比较大小关系
            if(inputNum > guess) {
                result.innerHTML = '猜大了';
            }else if(inputNum < guess) {
                result.innerHTML = '猜小了';
            }else {
                result.innerHTML = '猜对了';
            }



        }

        

    </script>
</body>
</html>